<template>
    <page-box>
        <div class="change-password-page">
            <el-button class="go-back" @click="goBack">返回</el-button>
            <div class="change-password-container">
                <div class="title"><span>修改密码</span></div>
                <validation-observer
                    ref="observerRef"
                    v-slot="{ handleSubmit }"
                    slim
                >
                    <el-form
                        class="custom-form change-password-form"
                        label-width="0"
                        ref="passwordFormRef"
                    >
                        <validation-provider
                            name="model.oldPwd"
                            :rules="'required'"
                            :customMessages="{ required: '请输入旧密码' }"
                            v-slot="{ errors }"
                            slim
                        >
                            <el-form-item required>
                                <div
                                    class="cf__group"
                                    :class="{ error: errors.length > 0 }"
                                >
                                    <div class="cf__group-info">
                                        <span
                                            ><icon-svg
                                                name="icon-lock"
                                            ></icon-svg
                                        ></span>
                                        <el-input
                                            id="oldPwd"
                                            placeholder="请输入旧密码"
                                            v-model="model.oldPwd"
                                            autocomplete="off"
                                            show-password
                                            readonly
                                            @focus="removeAttr('oldPwd')"
                                            @blur="setAttr('oldPwd')"
                                        ></el-input>
                                    </div>
                                    <div class="cf__group-tips">
                                        <template v-if="errors.length > 0">
                                            {{ errors[0] }}
                                        </template>
                                    </div>
                                </div>
                            </el-form-item>
                        </validation-provider>
                        <validation-provider
                            name="model.newPwd"
                            :rules="'required|customPassword'"
                            :customMessages="{
                                required: '请设置6~12位数字字母组合新密码',
                                customPassword:
                                    '请设置6~12位数字字母组合新密码',
                            }"
                            v-slot="{ errors }"
                            vid="confirmPwd"
                            slim
                        >
                            <el-form-item required>
                                <div
                                    class="cf__group"
                                    :class="{ error: errors.length > 0 }"
                                >
                                    <div class="cf__group-info">
                                        <span
                                            ><icon-svg
                                                name="icon-lock"
                                            ></icon-svg
                                        ></span>
                                        <el-input
                                            placeholder="请设置6~12位数字字母组合新密码"
                                            id="newPwd"
                                            v-model="model.newPwd"
                                            autocomplete="off"
                                            readonly
                                            @focus="removeAttr('newPwd')"
                                            @blur="setAttr('newPwd')"
                                            show-password
                                        ></el-input>
                                    </div>
                                    <div class="cf__group-tips">
                                        <template v-if="errors.length > 0">
                                            {{ errors[0] }}
                                        </template>
                                    </div>
                                </div>
                            </el-form-item>
                        </validation-provider>
                        <validation-provider
                            name="model.confirmPwd"
                            :rules="'required|confirmed:confirmPwd'"
                            :customMessages="{
                                required: '请再次输入新密码',
                                confirmed: '两次密码不一致',
                            }"
                            v-slot="{ errors }"
                            slim
                        >
                            <el-form-item required>
                                <div
                                    class="cf__group"
                                    :class="{ error: errors.length > 0 }"
                                >
                                    <div class="cf__group-info">
                                        <span
                                            ><icon-svg
                                                name="icon-lock"
                                            ></icon-svg
                                        ></span>
                                        <el-input
                                            placeholder="请再次输入新密码"
                                            v-model="model.confirmPwd"
                                            id="confirmPwd"
                                            autocomplete="off"
                                            readonly
                                            @focus="removeAttr('confirmPwd')"
                                            @blur="setAttr('confirmPwd')"
                                            show-password
                                        ></el-input>
                                    </div>
                                    <div class="cf__group-tips">
                                        <template v-if="errors.length > 0">
                                            {{ errors[0] }}
                                        </template>
                                    </div>
                                </div>
                            </el-form-item>
                        </validation-provider>
                        <el-form-item>
                            <el-button
                                class="submit-change-password"
                                :loading="btnLoader"
                                type="primary"
                                @click="handleSubmit(submit)"
                            >
                                {{ btnLoader ? "提交中" : "提交" }}
                            </el-button>
                        </el-form-item>
                    </el-form>
                </validation-observer>
            </div>
        </div>
    </page-box>
</template>

<script lang="ts">
import { ValidationObserver, ValidationProvider } from "vee-validate";
import { Component, Vue } from "vue-property-decorator";
// import { State } from 'vuex-class';
interface Model {
    oldPwd: string;
    newPwd: string;
    confirmPwd: string;
}
@Component({
    name: "loginNotAlive",
    components: {
        ValidationProvider,
        ValidationObserver
    }
})
export default class Home extends Vue {
    btnLoader = false;
    passwordType1 = "text";
    model: Model = {
        oldPwd: "",
        newPwd: "",
        confirmPwd: ""
    };

    copyModel: Model = {
        oldPwd: "",
        newPwd: "",
        confirmPwd: ""
    };

    removeAttr(idName: string) {
        (document as any)
            .getElementById(idName)
            .addEventListener("click", this.handleClick);
        (document as any)
            .getElementById(idName)
            .addEventListener("keydown", this.handleKeydown);
        (document as any)
            .getElementById(idName)
            .addEventListener("mousedown", this.handleMousedown);
        // 使用setTimeout，告诉JS是异步执行，这样子，就可以阻止第一次点击获取焦点时，下拉用户密码清
        // 单的框的出现
        setTimeout(() => {
            // 获取焦点时 同时去除只读，这样可以获取光标，进行输入
            (document as any)
                .getElementById(idName)
                .removeAttribute("readonly");
        }, 300);
    }

    setAttr(idName: string) {
        // 失去焦点立马更新为只读
        (document as any)
            .getElementById(idName)
            .setAttribute("readonly", "true");
    }

    handleClick(e: any) {
        // 为什么先失去焦点，在获取焦点，这样子可以避免第二次或更多次连续点击输入框时，出现的用户密
        // 码清单的框可以快速去除
        if (e.type === "click") {
            (document as any).getElementById(e.target.id).blur();
            (document as any).getElementById(e.target.id).focus();
        }
    }

    handleKeydown(e: any) {
        if (e.type === "keydown") {
            const keyCode = e.keyCode;
            // 和JS不一样，TS中写法如此，不然报类型“HTMLElement”上不存在属性“value”
            const passwordText: any = (document as any).getElementById(
                e.target.id
            );
            if (keyCode === 8 || keyCode === 46) {
                const len: any = passwordText.value.length;
                if (len === 1) {
                    passwordText.value = "";
                    return false;
                }
                if (
                    e.target.selectionStart === 0 &&
                    e.target.selectionEnd === len
                ) {
                    passwordText.value = "";
                    return false;
                }
            }
            return true;
        }
    }

    handleMousedown(e: any) {
        if (e.type === "mousedown") {
            (document as any).getElementById(e.target.id).blur();
            (document as any).getElementById(e.target.id).focus();
        }
    }

    async submit() {
        if (this.btnLoader) return;
        this.btnLoader = true;
        const { oldPwd, newPwd } = this.model;
        const res = await this.$server["user/changePassword"]({
            data: {
                password: oldPwd,
                newPassword: newPwd
            }
        });
        if (res.data.code === 200) {
            this.$message.success("新的密码已生效，请重新登录！");
            await this.$store.dispatch("logout");
            this.$router.replace("/auth/login");
            this.btnLoader = false;
        } else {
            this.btnLoader = false;
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    goBack() {
        this.$router.go(-1);
    }
}
</script>

<style lang="scss" scoped>
.change-password-page {
    margin: 0 auto;
    border-radius: 4px;
    .go-back {
        margin: 0.3rem 0 0 0.3rem;
    }
}
</style>
<style lang="scss" scoped>
::v-deep {
    .page-base-body {
        height: calc(100% - 10px) !important;
    }
}
.change-password-container {
    margin-top: 0.6rem;
    .title {
        text-align: center;
        margin-bottom: 0.3rem;
        span {
            display: inline-block;
            font-size: 0.22rem;
            font-weight: 600;
            text-align: center;
            padding-bottom: 0.04rem;
            border-bottom: 2px solid $password-confirm-prompt-text;
        }
    }
    .change-password-form {
        width: 4rem;
        margin: 0 auto;
        ::v-deep {
            .cf__group {
                padding-bottom: 0.1rem;
            }
            .cf__group-info {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                border-bottom: 1px solid #dcdcdc;
                i {
                    font-size: 0.18rem;
                    color: $password-confirm-prompt-text;
                }
                .el-input__inner {
                    border: 0;
                    border-radius: 0;
                    line-height: 0.14rem;
                    font-size: 0.14rem;
                    padding-left: 0.1rem;
                    border-left: 1px solid $password-confirm-prompt-text;
                    height: 0.14rem;
                    margin-left: 0.1rem;
                    -webkit-text-security: disc;
                }
                .el-input__suffix {
                    right: 16px;
                }
            }
            .cf__group-tips {
                line-height: 0.12rem;
                height: 0.12rem;
                bottom: -0.04rem;
            }
            .submit-change-password {
                width: 100%;
                margin-top: 0.25rem;
                // background: $password-confirm-prompt-text;
            }
        }
    }
}
</style>
